<template>
    <div class="task-list">
        <add-new-task></add-new-task>
        <added-task-list></added-task-list>
        <finished-task-list></finished-task-list>
        <div class="back-line"></div>
    </div>
</template>

<script>
import AddNewTask from "./AddNewTask";
import AddedTaskList from "./AddedTaskList";
import FinishedTaskList from "./FinishedTaskList";

export default {
    components: {
        AddNewTask,
        AddedTaskList,
        FinishedTaskList,
    },
};
</script>

<style lang="scss" scoped>
.task-list {
    height: 100%;

    .back-line {
        margin-top: 3rem;
        height: 100%;
        background: linear-gradient(
            180deg,
            white,
            white 52px,
            #e5e5e5 52px,
            #e5e5e5 52px
        );
        background-size: 100% 53px;
        box-shadow: inset 0 1px 0 0 #e5e5e5;
    }
}
</style>
